<template>
	<div>
		<article-list :articles="articles" :limit="limit" :total="articlesCount" @changePage="changePage"></article-list>
	</div>
</template>

<script>
	import articleList from './articleList'
  import { getArticles } from '@/api/article'

	export default {
		name: 'ProfileArticles',
		components: {
			articleList,
		},
		data () {
			return {
				articles: [],
				articlesCount: 0,
				limit: 20,
			}
		},
		watch: {
			'$route': 'getMyArticles'
		},
		created() {
			this.getMyArticles()
		},
		methods: {
			async getMyArticles() {
				const page = this.$route.query.page || 1
        const { data } = await getArticles({
          author: this.$route.params.username,
          limit: this.limit,
          offset: (page - 1) * this.limit,
        })

        this.articles = data.articles
        this.articlesCount = data.articlesCount
      },
      changePage(page) {
				this.$router.push({ name: 'profile', query: {
          page,
        } })
			}
		}
	}
</script>